<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>在线预定</title>
  <link rel="stylesheet" th:href="@{/css/style.css}" href="css/style.css" />
  <style>
    html, body, #container {
      height: 100%;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0;
      font-size: 13px;
    }

    #outer-box {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    #container {
      flex-grow: 1;
    }

    #container2 {
      height: 400px; /* 设置地图容器的高度 */
    }

    #panel {
      flex-shrink: 0;
      overflow: auto;
      width: 100%;
      z-index: 999;
      border-top: 1px solid #eaeaea;
      background: #fff;
      padding: 10px;
      box-sizing: border-box;
    }

    #searchBar {
      margin-bottom: 10px;
    }

    #searchInput {
      width: 100%;
      height: 30px;
      padding: 0 5px;
      border: 1px solid #ccc;
    }

    #searchResults {
      overflow: auto;
      height: 200px; /* Adjusted height for search results */
    }

    .amap_lib_placeSearch .poibox.highlight {
      background-color: #CAE1FF;
    }

    .reservation-form {
      position: relative;
    }

    .form-group {
      margin-bottom: 10px;
    }

    label {
      display: block;
      margin-bottom: 5px;
    }

    input, select, textarea {
      width: calc(100% - 22px); /* Adjusted width to account for padding and border */
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    button {
      padding: 10px 20px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    button:hover {
      background-color: #0056b3;
    }

    .current-location {
      height: 400px; /* 设置地图容器的高度 */
    }
  </style>
</head>
<body>
<div class="wrapper">
  <div class="reservation-form">
<!--    <div class="current-location">-->
<!--      <div id="container2"></div>-->
<!--    </div>-->
    <div id="outer-box">
      <div id="container" class="map"></div>
      <div id="panel">
        <div id="searchBar">
          <label for="destination">目的地点:</label>
          <input id="searchInput" placeholder="输入目的地点搜索" />
        </div>
        <div id="searchResults"></div>
      </div>
    </div>
    <h2>服务预约</h2>
    <form th:action="@{/submitQuote}" method="post">
      <div class="form-group">
        <label for="origin">出发地点:</label>
        <input type="text" id="origin" name="origin">
      </div>
      <div class="form-group">
        <input type="text" id="destination" name="destination" readonly>
      </div>
      <div class="form-group">
        <label for="travelTime">预定出行时间:</label>
        <input type="datetime-local" id="travelTime" name="travelTime" required>
      </div>
      <div class="form-group">
        <label for="numOfPeople">出行人数:</label>
        <input type="number" id="numOfPeople" name="numOfPeople" required>
      </div>
      <div class="form-group">
        <label for="serviceType">请选择服务类型：</label>
        <select id="serviceType" name="serviceType">
          <option value="airport">机场接送</option>
          <option value="urban">室内点到点接送</option>
          <option value="intercity">城际点到点接送</option>
        </select>
      </div>
      <div class="form-group">
        <label for="remarks">备注：</label>
        <textarea id="remarks" name="remarks" rows="4" cols="50"></textarea>
      </div>
      <div class="form-group">
        <button type="submit">提交</button>
      </div>
    </form>
  </div>
  <div class="navbar">
    <nav class="navbar">
      <ul class="nav-list">
        <li class="nav-item"><a th:href="@{/prt/index}">首页</a></li>
        <li class="nav-item"><a th:href="@{/prt/booking_guide}">预订指南</a></li>
        <li class="nav-item active"><a th:href="@{/prt/online_booking}">在线预订</a></li>
        <li class="nav-item"><a th:href="@{/prt/profile}">我</a></li>
      </ul>
    </nav>
  </div>
</div>
<script type="text/javascript">
  window._AMapSecurityConfig = {
    securityJsCode: "84ec24274e0fb47a345a8ce979ef4cfb",
  };
</script>
<script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=1869d3c6fca1a95eb881fe32c3b3a8b2'></script>
<script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
<script type="text/javascript">
  var map = new AMap.Map('container', {
    zoom: 10
  });

  AMap.plugin('AMap.Geolocation', function() {
    var geolocation = new AMap.Geolocation({
      enableHighAccuracy: true, //是否使用高精度定位，默认:true
      timeout: 10000,          //超过10秒后停止定位，默认：5s
      position:'RB',    //定位按钮的停靠位置
      offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
      zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
    });
    map.addControl(geolocation);
    geolocation.getCurrentPosition(function(status, result) {
      if (status == 'complete') {
        // onComplete(result); // 定位成功的回调函数
        document.getElementById('origin').value = result.position; // 自动填写出发地点
      } else {
        // onError(result); // 定位失败的回调函数
      }
    });
  });

  AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
    var poiPicker = new PoiPicker({
      input: 'searchInput',
      placeSearchOptions: {
        map: map,
        pageSize: 10
      },
      searchResultsContainer: 'searchResults'
    });

    poiPicker.on('poiPicked', function(poiResult) {
      poiPicker.hideSearchResults();
      var source = poiResult.source,
              poi = poiResult.item;
      if (source !== 'search') {
        poiPicker.searchByKeyword(poi.name);
      } else {
        document.getElementById('destination').value = poi.name;
        map.setCenter(poi.location);
        map.setZoom(15);
      }
    });
  });
</script>
</body>
</html>
<!--<!DOCTYPE html>-->
<!--<html xmlns:th="http://www.thymeleaf.org">-->
<!--<head>-->
<!--  <meta charset="UTF-8">-->
<!--  <title>在线预定</title>-->
<!--  <link rel="stylesheet" th:href="@{/css/style.css}" href="css/style.css" />-->
<!--  <style>-->
<!--    html, body, #container {-->
<!--      height: 100%;-->
<!--    }-->

<!--    html,-->
<!--    body {-->
<!--      width: 100%;-->
<!--      height: 100%;-->
<!--      margin: 0px;-->
<!--      padding: 0;-->
<!--      font-size: 13px;-->
<!--    }-->

<!--    #outer-box {-->
<!--      display: flex;-->
<!--      flex-direction: column;-->
<!--      height: 100%;-->
<!--    }-->

<!--    #container {-->
<!--      flex-grow: 1;-->
<!--    }-->
<!--    #container2 {-->
<!--      height: 100%;-->
<!--    }-->
<!--    #panel {-->
<!--      flex-shrink: 0;-->
<!--      overflow: auto;-->
<!--      width: 100%;-->
<!--      z-index: 999;-->
<!--      border-top: 1px solid #eaeaea;-->
<!--      background: #fff;-->
<!--      padding: 10px;-->
<!--      box-sizing: border-box;-->
<!--    }-->

<!--    #searchBar {-->
<!--      margin-bottom: 10px;-->
<!--    }-->

<!--    #searchInput {-->
<!--      width: 100%;-->
<!--      height: 30px;-->
<!--      padding: 0 5px;-->
<!--      border: 1px solid #ccc;-->
<!--    }-->

<!--    #searchResults {-->
<!--      overflow: auto;-->
<!--      height: 200px; /* Adjusted height for search results */-->
<!--    }-->

<!--    .amap_lib_placeSearch .poibox.highlight {-->
<!--      background-color: #CAE1FF;-->
<!--    }-->

<!--    .reservation-form {-->
<!--      position: relative;-->
<!--    }-->

<!--    .form-group {-->
<!--      margin-bottom: 10px;-->
<!--    }-->

<!--    label {-->
<!--      display: block;-->
<!--      margin-bottom: 5px;-->
<!--    }-->

<!--    input, select, textarea {-->
<!--      width: calc(100% - 22px); /* Adjusted width to account for padding and border */-->
<!--      padding: 8px;-->
<!--      border: 1px solid #ccc;-->
<!--      border-radius: 4px;-->
<!--    }-->

<!--    button {-->
<!--      padding: 10px 20px;-->
<!--      background-color: #007bff;-->
<!--      color: white;-->
<!--      border: none;-->
<!--      border-radius: 4px;-->
<!--      cursor: pointer;-->
<!--    }-->

<!--    button:hover {-->
<!--      background-color: #0056b3;-->
<!--    }-->
<!--    .current-location {-->
<!--      height: 400px; /* 设置地图容器的高度 */-->
<!--    }-->
<!--  </style>-->
<!--</head>-->

<!--<body>-->
<!--<div class="wrapper">-->
<!--  <div class="reservation-form">-->

<!--    <div class="current-location">-->
<!--      <div id="container2"></div>-->
<!--    </div>-->

<!--    <div id="outer-box">-->
<!--      <div id="container" class="map"></div>-->
<!--      <div id="panel">-->
<!--        <div id="searchBar">-->
<!--          <label for="destination">目的地点:</label>-->
<!--          <input id="searchInput" placeholder="输入目的地点搜素" />-->
<!--        </div>-->
<!--        <div id="searchResults"></div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <h2>服务预约</h2>-->
<!--    <form th:action="@{/submitQuote}" method="post">-->
<!--&lt;!&ndash;      <div class="form-group">&ndash;&gt;-->
<!--&lt;!&ndash;        <label for="name">姓名:</label>&ndash;&gt;-->
<!--&lt;!&ndash;        <input type="text" id="name" name="name" required>&ndash;&gt;-->
<!--&lt;!&ndash;      </div>&ndash;&gt;-->
<!--&lt;!&ndash;      <div class="form-group">&ndash;&gt;-->
<!--&lt;!&ndash;        <label for="contact">联系方式（电话）:</label>&ndash;&gt;-->
<!--&lt;!&ndash;        <input type="tel" id="contact" name="contact" required>&ndash;&gt;-->
<!--&lt;!&ndash;      </div>&ndash;&gt;-->
<!--      <div class="form-group">-->
<!--        <label for="origin">出发地点:</label>-->
<!--        <input type="text" id="origin" name="origin">-->
<!--      </div>-->
<!--      <div class="form-group">-->
<!--        <input type="text" id="destination" name="destination" readonly>-->
<!--      </div>-->
<!--      <div class="form-group">-->
<!--        <label for="travelTime">预定出行时间:</label>-->
<!--        <input type="datetime-local" id="travelTime" name="travelTime" required>-->
<!--      </div>-->
<!--      <div class="form-group">-->
<!--        <label for="numOfPeople">出行人数:</label>-->
<!--        <input type="number" id="numOfPeople" name="numOfPeople" required>-->
<!--      </div>-->
<!--      <div class="form-group">-->
<!--        <label for="serviceType">请选择服务类型：</label>-->
<!--        <select id="serviceType" name="serviceType">-->
<!--          <option value="airport">机场接送</option>-->
<!--          <option value="urban">室内点到点接送</option>-->
<!--          <option value="intercity">城际点到点接送</option>-->
<!--        </select>-->
<!--      </div>-->
<!--      <div class="form-group">-->
<!--        <label for="remarks">备注：</label>-->
<!--        <textarea id="remarks" name="remarks" rows="4" cols="50"></textarea>-->
<!--      </div>-->
<!--      <div class="form-group">-->
<!--        <button type="submit">提交</button>-->
<!--      </div>-->
<!--    </form>-->
<!--  </div>-->
<!--  <div class="navbar">-->
<!--    &lt;!&ndash; 导航栏内容 &ndash;&gt;-->
<!--    <nav class="navbar">-->
<!--      <ul class="nav-list">-->
<!--        <li class="nav-item"><a th:href="@{/prt/index}">首页</a></li>-->
<!--        <li class="nav-item"><a th:href="@{/prt/booking_guide}">预订指南</a></li>-->
<!--        <li class="nav-item active"><a th:href="@{/prt/online_booking}">在线预订</a></li>-->
<!--        <li class="nav-item"><a th:href="@{/prt/profile}">我</a></li>-->
<!--      </ul>-->
<!--    </nav>-->
<!--  </div>-->
<!--</div>-->
<!--<script type="text/javascript">-->
<!--  window._AMapSecurityConfig = {-->
<!--    securityJsCode: "84ec24274e0fb47a345a8ce979ef4cfb",-->
<!--  };-->
<!--</script>-->
<!--<script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=1869d3c6fca1a95eb881fe32c3b3a8b2'></script>-->
<!--&lt;!&ndash; UI组件库 1.0 &ndash;&gt;-->
<!--<script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>-->
<!--<script type="text/javascript">-->
<!--  var map = new AMap.Map('container', {-->
<!--    zoom: 10-->
<!--  });-->

<!--  AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {-->
<!--    var poiPicker = new PoiPicker({-->
<!--      input: 'searchInput',-->
<!--      placeSearchOptions: {-->
<!--        map: map,-->
<!--        pageSize: 10-->
<!--      },-->
<!--      searchResultsContainer: 'searchResults'-->
<!--    });-->

<!--    poiPicker.on('poiPicked', function(poiResult) {-->
<!--      poiPicker.hideSearchResults();-->
<!--      var source = poiResult.source,-->
<!--              poi = poiResult.item;-->
<!--      if (source !== 'search') {-->
<!--        poiPicker.searchByKeyword(poi.name);-->
<!--      } else {-->
<!--        document.getElementById('destination').value = poi.name;-->
<!--        map.setCenter(poi.location);-->
<!--        map.setZoom(15);-->
<!--      }-->
<!--    });-->
<!--  });-->
<!--</script>-->
<!--</body>-->
<!--</html>-->